<template>
    <span @click="getCode">{{content}}<em v-show="showSecond">秒</em></span>
</template>

<script>
export default {
    name: '',
    props: ['mobile'],
    data() { 
        return {
            content: '发送验证码',
            showSecond: false
        }
    },
    created() {

    },
    methods:{
        getCode() {
            
            if(this.mobile) {
                let timer
                this.content = 60 
                this.showSecond = true
                timer = setInterval(() => {
                    if(this.content > 0) {
                        this.content--
                    } else {
                        clearInterval(timer)
                        this.showSecond = false
                        this.content = "发送验证码"
                    }
                }, 1000);
                this.$emit('checkmobile', true)
            } else {
                this.$loading.show('请输入验证码')
                setTimeout(() => {
                    this.$loading.hide()
                }, 1000);
            }
        }
    },
}
</script>

<style scoped lang="scss">
span {
    width: 100px;
    text-align: center;
    background-color: #ccc;
    display: inline-block;
    color: #eee;
    vertical-align: middle;
}
</style>